<template>
<div class="playMiddle">
  <swiper :options="swiperOptions" class="banner" >
    <swiper-slide class="item">
      <div class="cd" ref="cd">
        <img :src="currentSongs.picUrl" alt="">
      </div>
    </swiper-slide>
    <swiper-slide class="item">
      <IscrollView ref="iscrollview">
        <ul class="cdList">
          <li v-for="(value,index) in lyric" :key="index" :class="{'active' :currentlineNum === index}">{{index}}---{{value}}</li>
        </ul>
      </IscrollView>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import IscrollView from '../../components/IscrollView'
import { mapGetters } from 'vuex'
export default {
  name: 'PlayerMiddle',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      },
      currentlineNum: '0'
    }
  },
  components: {
    swiper,
    swiperSlide,
    IscrollView
  },
  computed: {
    ...mapGetters([
      'isPlay',
      'currentSongs',
      'lyric'
    ])
  },
  watch: {
    isPlay (newValue, oldValue) {
      if (newValue) {
        this.$refs.cd.classList.add('active')
        // this.$refs.iscrollview.refresh()
      } else {
        this.$refs.cd.classList.remove('active')
      }
    },
    lyric (newValue, oldValue) {
      for (const key in newValue) {
        this.currentlineNum = key
        return
      }
    },
    currentTime (newValue, oldValue) {
      // // 1.歌词高亮
      // const lineNum = Math.floor(newValue) + ''
      // const result = this.lyric[lineNum]
      // if (result !== undefined && result !== '') {
      //   this.currentlineNum = lineNum
      //   // 2.歌词滚动
      //   const songTop = document.querySelector('ul>.active').offsetTop
      //   const lyricHeiht = this.$refs.iscrollview.$el.offsetHeight
      //   if (songTop > lyricHeiht / 2) {
      //     this.$refs.iscrollview.move(0, lyricHeiht / 2 - songTop, 100)
      //   }
      // }
      // 1.歌词高亮
      const lineNum = Math.floor(newValue)
      this.currentlineNum = this.getLineNum(lineNum)
      // 2.歌词滚动
      const songTop = document.querySelector('ul>.active').offsetTop
      const lyricHeiht = this.$refs.iscrollview.$el.offsetHeight
      if (songTop > lyricHeiht / 2) {
        this.$refs.iscrollview.move(0, lyricHeiht / 2 - songTop, 100)
      } else {
        this.$refs.iscrollview.move(0, 0, 100)
      }
    }
  },
  methods: {
    getLineNum (lineNum) {
      if (lineNum < 0) {
        return this.currentlineNum
      }
      const result = this.lyric[lineNum + '']
      if (result === undefined || result === '') {
        lineNum--
        return this.getLineNum(lineNum)
      } else {
        return lineNum + ''
      }
    }
  },
  props: {
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  }

}
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  @import "../../assets/css/variable";
.banner{
  position: fixed;
  top:150px;
  bottom: 250px;
  right: 0;
  left:0;
  .cd{
    display: block;
    margin:  0 auto;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 30px solid #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    animation: sport 3s linear infinite;
    animation-play-state: paused;
    &.active{
      animation-play-state:running;
    }
    img{
      width: 100%;
      height: 100%;
    }
  }
  p{
    text-align: center;
    @include font_color();
    @include font_size($font_samll);
    margin-top: 50px;
  }
  .cdList{
    width: 100%;
    li{
      width: 100%;
      text-align: center;
      margin: 30px 0;
      box-sizing: border-box;
      @include font_color();
      &:last-child{
        padding-bottom: 50%;
      }
      &.active{
        color: seagreen;
      }
    }
  }
}
  @keyframes sport {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>

<style lang="scss">
  .my-bullet{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #fff;
    margin: 0 20px;
  }
  .my-bullet-active{
    width: 50px;
    background: red;
  }
</style>
